<template>
  <div class="crud-operations">
    <a-button  v-if="!$route.query.id" type="primary" @click="showModal('add')" class="mb-4">
      新增
    </a-button>
    <a-table
      :columns="columns"
      :data-source="dataSource"
      :rowKey="record => record.id"
      :pagination="pagination"
      @change="handleTableChange"
    >
      <template slot="action" slot-scope="text, record">
        <a-space>
          <a-button type="link" @click="showModal('edit', record)">编辑</a-button>
          <a-popconfirm title="确定删除这条记录吗？" ok-text="是" cancel-text="否" @confirm="handleDelete(record.id)">
            <a-button type="link">删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </a-table>

    <a-modal
      :title="modalMode === 'add' ? '新增' : '编辑'"
      :visible="modalVisible"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form-model :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" ref="form" :model="formData" :rules="rules">
        <a-form-model-item label="类别" prop="type">
<!--          <a-input v-model="formData.type" />-->
          <a-select v-model="formData.type" placeholder="请选择类别">
            <a-select-option v-for="option in opt['agency_device_type']" :key="option.value" :value="option.value">
            {{ option.label }}
          </a-select-option>
          </a-select>

        </a-form-model-item>
        <a-form-model-item label="设施名称" prop="projectName">
        <a-input v-model="formData.projectName" />
      </a-form-model-item>  <a-form-model-item label="数量" prop="num">
        <a-input-number v-model="formData.num" :style="{ width: '100%' }" />
      </a-form-model-item><a-form-model-item label="面积(㎡)/规格型号" prop="area">
          <a-input-number v-model="formData.area" :style="{ width: '100%' }" />
        </a-form-model-item>
<!--        <a-form-model-item label="账号" prop="legalCode">
          <a-input v-model="formData.legalCode" />
        </a-form-model-item>-->



      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { deleteAction } from '@/api/manage'
export default {
  props: {
    user: {
      type: Object,
    },
  },
  data() {
    return {
      opt: {},
      columns: [
        { title: 'ID', dataIndex: 'id', key: 'id' },
        { title: '项目', dataIndex: 'projectName', key: 'projectName' , customRender: text => {
            return this.opt['agency_device_type'].find(item => item.value === text)?.label
          },},
        { title: '数量', dataIndex: 'num', key: 'num' },
        { title: '类别', dataIndex: 'type', key: 'type' }, { title: '面积(㎡)/规格型号', dataIndex: 'area', key: 'area' },
    /*    { title: '创建人', dataIndex: 'createBy', key: 'createBy' },
        { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
        { title: '删除状态', dataIndex: 'delFlag', key: 'delFlag' },
        { title: '账号', dataIndex: 'legalCode', key: 'legalCode' },*/



        { title: '操作', key: 'action', scopedSlots: { customRender: 'action' } },
      ],
      dataSource: [],
      modalVisible: false,
      modalMode: 'add',
      formData: {
        area: null,
        legalCode: '',
        num: null,
        projectName: '',
        type: '',
      },
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
      },
      rules: {
        area: [{ required: true, message: '请输入面积', trigger: 'blur' }],
        legalCode: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        num: [{ required: true, message: '请输入数量', trigger: 'blur' }],
        projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        type: [{ required: true, message: '请输入类别', trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.fetchData()
    this.getOptions('agency_device_type')
  },
  methods: { getOptions(url) {
      if (url && typeof url === 'string') {
        return this.$http.get('/register/common/getDictItems/' + url).then(v => {
          console.log(v)
          this.opt[url] = v.result.map(item => {
            return {
              ...item,
              value: item.value,
              label: item.text,
            }
          })
        })
      }
    },
    handleTableChange(pagination) {
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.fetchData()
    },
    async fetchData() {
      this.$http
        .get('/register/agencyLegalDevice/list', {
          params: { legalCode: this.user.legalCode,pageNo: this.pagination.current, pageSize: this.pagination.pageSize },
        })
        .then(r => {
          this.dataSource = r.result.records
          this.pagination.total = r.result.total
        })
      // 模拟API调用
    },
    showModal(mode, record = null) {
      this.modalMode = mode
      this.modalVisible = true
      if (mode === 'edit' && record) {
        this.formData = { ...record }
      } else {
        this.formData = {
          area: null,
          legalCode: '',
          num: null,
          projectName: '',
          type: '',
        }
      }
    },
    handleModalOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.modalMode === 'add') {
            this.handleAdd()
          } else {
            this.handleEdit()
          }
        }
      })
    },
    handleModalCancel() {
      this.modalVisible = false
      this.$refs.form.resetFields()
    },
    handleAdd() {
      // 模拟API调用
      const newRecord = {
        ...this.formData,
        legalCode: this.user.legalCode,
      }
      this.$http.post('/register/agencyLegalDevice/add', newRecord).then(r => {
        this.fetchData()
        this.modalVisible = false
        this.$message.success('添加成功')
      })
    },
    handleEdit() {
      // 模拟API调用
      const newRecord = {
        ...this.formData,
        legalCode: this.user.legalCode,
      }
      this.$http.post('/register/agencyLegalDevice/edit', newRecord).then(r => {
        this.fetchData()
        this.modalVisible = false
        this.$message.success('编辑成功')
      })
    },
    handleDelete(id) {
      deleteAction('/register/agencyLegalDevice/delete', { id }).then(r => {
        this.fetchData()
        this.$message.success('删除成功')
      })
    },
  },
}
</script>

<style scoped>
.crud-operations {
  padding: 24px;
}

.mb-4 {
  margin-bottom: 16px;
}
</style>
